<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery-3.5.1.min.js"></script>

</head>
<body>
<div class="container">


    <button  data-toggle="modal" data-target="#myModal" onclick="addNew();return true;">
        新增
    </button>
    <h1>this is a list for students!</h1>
    <table class="table">
        <thead>
        <tr>
            <td>id</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>班级</td>
            <td>性别</td>
            <td>成绩</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody id="stdTable">


        </tbody>


    </table>

</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增学生</h4>
            </div>
            <div class="modal-body">

                <form id="frmStu">

                    <input type="hidden" id="id" name="id"/>

                    <div class="form-group">
                        <label >姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label >年龄</label>
                        <input type="number" class="form-control" id="age" name="age" placeholder="年龄">
                    </div>

                    <div class="form-group">
                        <label >班级</label>
                        <input type="text" class="form-control" id="className" name="className"
                               placeholder="班级">
                    </div>

                    <div class="form-group">
                        <label >性别</label>

                        <select class="form-control" id="sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>

                        </select>

                    </div>

                    <div class="form-group">
                        <label >成绩</label>
                        <input type="number" class="form-control" id="score" name="score" placeholder="成绩">
                    </div>



                </form>



            </div>
            <div class="modal-footer">
                 <button type="button" class="btn btn-primary" onclick="return savestudent();">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="/js/bootstrap.js"></script>
<script>


    function addNew() {

        $("#id").val(-1);
        document.getElementById("frmStu").reset();
        //alert("add new!");
    }

    function savestudent(){
        var name =$("#name").val();
        var score =$("#score").val();
        var className =$("#className").val();
        var age =$("#age").val();
        var sex =$("#sex").val();

        var id =$("#id").val();
        if(id<0){
            //新增代码
            $.ajax({
                url:"/webapi/student/insert",
                type:"POST"
                ,data:{
                    sex:sex,
                    age:age,
                    name:name,
                    className:className,
                    score:score
                }
            }).done(function (rs){

                if(rs.id!=null){
                    alert("Insert Sucess!");
                    $('#myModal').modal('hide')
                    showTable();
                    return true;
                }



            })
        }else{
            //更新
            $.ajax({
                url:"/webapi/student/update",
                type:"PUT"
                ,data:{
                    id:id,
                    sex:sex,
                    age:age,
                    name:name,
                    className:className,
                    score:score
                }
            }).done(function (rs){

                if(rs.id!=null){
                    alert("update Sucess!");
                    $('#myModal').modal('hide')

                    showTable();
                    return true;
                }



            })

        }



    }


    function upStu(id){
       $.ajax({
           url:"/webapi/student/get/"+id
       }).done(function (rs){

           console.log(rs);

           $("#name").val(rs.name);
           $("#sex").val(rs.sex);
           $("#age").val(rs.age);
           $("#className").val(rs.className);
           $("#score").val(rs.score);
           $("#id").val(rs.id);


           $('#myModal').modal('show');
       });

    }
    function delStu(id){
        alert(id);
    }


    function showTable(){

        $.ajax({
            url: "/webapi/student/list"
        }).done(function (rs) {

            console.log(rs);
            var html = "";
            for (var i = 0; i < rs.length; i++) {
                var item = rs[i];
                html += "<tr>"
                html += "<td>" + item.id + "</td>";
                html += "<td>" + item.name + "</td>";
                html += "<td>" + item.age + "</td>";
                html += "<td>" + item.className + "</td>";
                html += "<td>" + item.sex + "</td>";
                html += "<td>" + item.score + "</td>";
                html +="<td> <a href='#' onclick='upStu("+item.id
                    +")'>修改</a> <a href='#' onclick='delStu("
                    +item.id+");'>删除</a></td>"

                html += "</tr>"
            }

            $("#stdTable").html(html);

        });

    }
    $(function () {

        showTable();
    });


</script>

</body>
</html>